@transfergratis/react-native-sdk 0.1.2

package/build/components/OverLay/SelfieOverlay.js

@@ -0,0 +1,168 @@
+import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
+import ScanningLine from "../Svgs/scanningLine";
+import FrontSelfieIcon from "../Svgs/frontSelfieIcon";
+import StepOverlay from "./StepOverlay";
+import SideSelfieIcon from "../Svgs/sideSelfieIcon";
+const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, instructionsTile, instructionsSubtitle, orientation }) => {
+    const screenWidth = Dimensions.get('window').width;
+    const screenHeight = Dimensions.get('window').height;
+    // Dimensions de l'icône FrontSelfieIcon (240x285 selon le viewBox)
+    const iconWidth = 240;
+    const iconHeight = 285;
+    // Calculer la position pour centrer l'icône
+    const iconX = (screenWidth - iconWidth) / 2;
+    const iconY = (screenHeight - iconHeight) / 3;
+    // Position du centre pour le masque (doit correspondre au centre de l'icône)
+    const maskCenterX = iconX + iconWidth / 2;
+    const maskCenterY = iconY + iconHeight / 2;
+    // Zone pour ScanningLine (basée sur la zone de l'icône)
+    const scanningYMin = iconY;
+    const scanningYMax = iconY + iconHeight;
+    return (<View style={StyleSheet.absoluteFill}>
+            {stepperProps ? (<StepOverlay {...stepperProps}/>) : null}
+
+            <Svg height="100%" width="100%" style={[StyleSheet.absoluteFill]}>
+                <Defs>
+                    <Mask id="faceMask">
+                        {/* Fond blanc - zone visible (extérieur) */}
+                        <Rect x="0" y="0" width="100%" height="100%" fill="white"/>
+                        {/* Zone noire - zone masquée (forme du visage) - exactement alignée avec l'icône */}
+                        <Path d="M35.4198 48.9242C38.2153 41.9014 42.5851 35.6693 48.3859 30.8232C61.3601 19.9842 88.1543 1.5 120 1.5C151.846 1.5 178.64 19.9842 191.614 30.8232C197.415 35.6693 201.785 41.9014 204.58 48.9242C210.484 63.7564 220 93.0114 220 127.5C220 168.082 204.19 212.617 198.234 227.954C196.792 231.667 194.971 235.196 192.628 238.417C183.46 251.021 156.313 283.5 120 283.5C83.6867 283.5 56.5401 251.021 47.3723 238.417C45.0294 235.196 43.2081 231.667 41.7663 227.954C35.8102 212.617 20 168.082 20 127.5C20 93.0114 29.5157 63.7564 35.4198 48.9242Z" fill="black" transform={`translate(${maskCenterX}, ${maskCenterY}) translate(-120, -142.5)`}/>
+                    </Mask>
+                </Defs>
+
+                {/* Overlay semi-transparent avec masque */}
+                <Rect x="0" y="0" width="100%" height="100%" fill="rgba(0, 0, 0, 0.5)" mask="url(#faceMask)"/>
+                <ScanningLine yMin={scanningYMin} screenWidth={screenWidth} height={screenHeight} yMax={scanningYMax}/>
+            </Svg>
+
+            {/* Container de l'icône - centré automatiquement */}
+            <View style={[styles.iconContainer, {
+                left: iconX,
+                top: iconY,
+                width: iconWidth,
+                height: iconHeight,
+            }]}>
+                {orientation === "front" ? <FrontSelfieIcon /> : <SideSelfieIcon />}
+            </View>
+
+            {/* Flèche directionnelle pour les orientations latérales */}
+            {orientation !== "front" ? (<View style={[
+                styles.arrowContainer,
+                {
+                    top: iconY + iconHeight / 2 - 50, // Centré verticalement par rapport à l'icône
+                    left: orientation === "left" ? iconX - 72 : 'auto',
+                    right: orientation === "right" ? iconX - 75 : 'auto'
+                }
+            ]}>
+                    <Image source={require('../Svgs/directionArrow.gif')} resizeMode="contain" style={[
+                styles.arrowImage,
+                { transform: orientation === "right" ? [{ scaleX: -1 }] : [] }
+            ]}/>
+                </View>) : null}
+
+            <View style={styles.bottomIntruction}>
+                <Text style={styles.bottomTitle}>
+                    {instructionsTile}
+                </Text>
+                <Text style={styles.bottomSubtitle}>
+                    {instructionsSubtitle}
+                </Text>
+            </View>
+        </View>);
+};
+export default SelfieOverlay;
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '50%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    svg: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+    },
+    topIntruction: {
+        zIndex: 1000,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        paddingHorizontal: 10,
+        marginHorizontal: 20,
+        marginTop: 10,
+        backgroundColor: "#FDE04730",
+        borderColor: "#FDE047",
+        borderWidth: 1,
+        borderRadius: 10,
+        gap: 10,
+    },
+    topIntructionText: {
+        color: '#FDE047',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntruction: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '35%',
+        paddingHorizontal: 20,
+    },
+    bottomIntructionTextBold: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomIntructionText: {
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomTitle: {
+        color: 'white',
+        fontSize: 25,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    bottomSubtitle: {
+        color: 'white',
+        marginTop: 15,
+        fontSize: 14,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    image: {
+        position: 'absolute',
+        borderRadius: 10,
+    },
+    iconContainer: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowContainer: {
+        position: 'absolute',
+        width: 100,
+        height: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowImage: {
+        width: 100,
+        height: 100,
+        objectFit: 'contain',
+    },
+});
+//# sourceMappingURL=SelfieOverlay.js.map

package/build/components/OverLay/SelfieOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieOverlay.js","sourceRoot":"","sources":["../../../src/components/OverLay/SelfieOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,eAAe,MAAM,yBAAyB,CAAC;AACtD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,cAAc,MAAM,wBAAwB,CAAC;AAEpD,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,GAAG,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,WAAW,EAAsB,EAAE,EAAE;IAC9L,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IACnD,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAErD,mEAAmE;IACnE,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,UAAU,GAAG,GAAG,CAAC;IAEvB,4CAA4C;IAC5C,MAAM,KAAK,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAE9C,6EAA6E;IAC7E,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,KAAK,GAAG,UAAU,GAAG,CAAC,CAAC;IAE3C,wDAAwD;IACxD,MAAM,YAAY,GAAG,KAAK,CAAC;IAC3B,MAAM,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC;IAExC,OAAO,CACH,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CACjC;YAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACZ,CAAC,WAAW,CAAC,IAAI,YAAY,CAAC,EAAG,CACpC,CAAC,CAAC,CAAC,IAAI,CAER;;YAAA,CAAC,GAAG,CACA,MAAM,CAAC,MAAM,CACb,KAAK,CAAC,MAAM,CACZ,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAEjC;gBAAA,CAAC,IAAI,CACD;oBAAA,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CACf;wBAAA,CAAC,2CAA2C,CAC5C;wBAAA,CAAC,IAAI,CACD,CAAC,CAAC,GAAG,CACL,CAAC,CAAC,GAAG,CACL,KAAK,CAAC,MAAM,CACZ,MAAM,CAAC,MAAM,CACb,IAAI,CAAC,OAAO,EAEhB;wBAAA,CAAC,mFAAmF,CACpF;wBAAA,CAAC,IAAI,CACD,CAAC,CAAC,shBAAshB,CACxhB,IAAI,CAAC,OAAO,CACZ,SAAS,CAAC,CAAC,aAAa,WAAW,KAAK,WAAW,2BAA2B,CAAC,EAEvF;oBAAA,EAAE,IAAI,CACV;gBAAA,EAAE,IAAI,CAEN;;gBAAA,CAAC,0CAA0C,CAC3C;gBAAA,CAAC,IAAI,CACD,CAAC,CAAC,GAAG,CACL,CAAC,CAAC,GAAG,CACL,KAAK,CAAC,MAAM,CACZ,MAAM,CAAC,MAAM,CACb,IAAI,CAAC,oBAAoB,CACzB,IAAI,CAAC,gBAAgB,EAEzB;gBAAA,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,EACzG;YAAA,EAAE,GAAG,CAEL;;YAAA,CAAC,mDAAmD,CACpD;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE;gBAChC,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,UAAU;aACrB,CAAC,CAAC,CACC;gBAAA,CAAC,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CACvE;YAAA,EAAE,IAAI,CAEN;;YAAA,CAAC,2DAA2D,CAC5D;YAAA,CAAC,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACT,MAAM,CAAC,cAAc;gBACrB;oBACI,GAAG,EAAE,KAAK,GAAG,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE,6CAA6C;oBAC/E,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM;oBAClD,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,GAAC,EAAE,CAAA,CAAC,CAAC,MAAM;iBACpD;aACJ,CAAC,CACE;oBAAA,CAAC,KAAK,CACF,MAAM,CAAC,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC,CAC9C,UAAU,CAAC,SAAS,CACpB,KAAK,CAAC,CAAC;gBACH,MAAM,CAAC,UAAU;gBACjB,EAAE,SAAS,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;aACjE,CAAC,EAEV;gBAAA,EAAE,IAAI,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CAER;;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACjC;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC5B;oBAAA,CAAC,gBAAgB,CACrB;gBAAA,EAAE,IAAI,CACN;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAC/B;oBAAA,CAAC,oBAAoB,CACzB;gBAAA,EAAE,IAAI,CACV;YAAA,EAAE,IAAI,CACV;QAAA,EAAE,IAAI,CAAC,CACV,CAAA;AACL,CAAC,CAAA;AAED,eAAe,aAAa,CAAC;AAG7B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC7B,OAAO,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,KAAK;QACb,eAAe,EAAE,oBAAoB;KACxC;IACD,GAAG,EAAE;QACD,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACjB;IACD,aAAa,EAAE;QACX,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;QACrB,gBAAgB,EAAE,EAAE;QACpB,SAAS,EAAE,EAAE;QACb,eAAe,EAAE,WAAW;QAC5B,WAAW,EAAE,SAAS;QACtB,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,EAAE;QAChB,GAAG,EAAE,EAAE;KACV;IACD,iBAAiB,EAAE;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;KACtB;IACD,gBAAgB,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,KAAK;QACb,iBAAiB,EAAE,EAAE;KACxB;IACD,wBAAwB,EAAE;QACtB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;KACtB;IACD,oBAAoB,EAAE;QAClB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;KACtB;IACD,WAAW,EAAE;QACT,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;KACtB;IACD,cAAc,EAAE;QACZ,KAAK,EAAE,OAAO;QACd,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,QAAQ;KACtB;IAGD,KAAK,EAAE;QACH,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,EAAE;KACnB;IACD,aAAa,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACvB;IACD,cAAc,EAAE;QACZ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACvB;IACD,UAAU,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,SAAS;KACvB;CACJ,CAAC,CAAA","sourcesContent":["import { Dimensions, Image, StyleSheet, Text, View } from \"react-native\";\nimport { IdCardOverlayProps } from \"./type\";\nimport Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';\nimport ScanningLine from \"../Svgs/scanningLine\";\nimport FrontSelfieIcon from \"../Svgs/frontSelfieIcon\";\nimport StepOverlay from \"./StepOverlay\";\nimport SideSelfieIcon from \"../Svgs/sideSelfieIcon\";\n\nconst SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, cornerColor = \"#4CAF50\", stepperProps, instructionsTile, instructionsSubtitle, orientation }: IdCardOverlayProps) => {\n    const screenWidth = Dimensions.get('window').width;\n    const screenHeight = Dimensions.get('window').height;\n\n    // Dimensions de l'icône FrontSelfieIcon (240x285 selon le viewBox)\n    const iconWidth = 240;\n    const iconHeight = 285;\n\n    // Calculer la position pour centrer l'icône\n    const iconX = (screenWidth - iconWidth) / 2;\n    const iconY = (screenHeight - iconHeight) / 3;\n\n    // Position du centre pour le masque (doit correspondre au centre de l'icône)\n    const maskCenterX = iconX + iconWidth / 2;\n    const maskCenterY = iconY + iconHeight / 2;\n\n    // Zone pour ScanningLine (basée sur la zone de l'icône)\n    const scanningYMin = iconY;\n    const scanningYMax = iconY + iconHeight;\n\n    return (\n        <View style={StyleSheet.absoluteFill}>\n            {stepperProps ? (\n                <StepOverlay {...stepperProps} />\n            ) : null}\n\n            <Svg\n                height=\"100%\"\n                width=\"100%\"\n                style={[StyleSheet.absoluteFill]}\n            >\n                <Defs>\n                    <Mask id=\"faceMask\">\n                        {/* Fond blanc - zone visible (extérieur) */}\n                        <Rect\n                            x=\"0\"\n                            y=\"0\"\n                            width=\"100%\"\n                            height=\"100%\"\n                            fill=\"white\"\n                        />\n                        {/* Zone noire - zone masquée (forme du visage) - exactement alignée avec l'icône */}\n                        <Path\n                            d=\"M35.4198 48.9242C38.2153 41.9014 42.5851 35.6693 48.3859 30.8232C61.3601 19.9842 88.1543 1.5 120 1.5C151.846 1.5 178.64 19.9842 191.614 30.8232C197.415 35.6693 201.785 41.9014 204.58 48.9242C210.484 63.7564 220 93.0114 220 127.5C220 168.082 204.19 212.617 198.234 227.954C196.792 231.667 194.971 235.196 192.628 238.417C183.46 251.021 156.313 283.5 120 283.5C83.6867 283.5 56.5401 251.021 47.3723 238.417C45.0294 235.196 43.2081 231.667 41.7663 227.954C35.8102 212.617 20 168.082 20 127.5C20 93.0114 29.5157 63.7564 35.4198 48.9242Z\"\n                            fill=\"black\"\n                            transform={`translate(${maskCenterX}, ${maskCenterY}) translate(-120, -142.5)`}\n                        />\n                    </Mask>\n                </Defs>\n\n                {/* Overlay semi-transparent avec masque */}\n                <Rect\n                    x=\"0\"\n                    y=\"0\"\n                    width=\"100%\"\n                    height=\"100%\"\n                    fill=\"rgba(0, 0, 0, 0.5)\"\n                    mask=\"url(#faceMask)\"\n                />\n                <ScanningLine yMin={scanningYMin} screenWidth={screenWidth} height={screenHeight} yMax={scanningYMax} />\n            </Svg>\n\n            {/* Container de l'icône - centré automatiquement */}\n            <View style={[styles.iconContainer, {\n                left: iconX,\n                top: iconY,\n                width: iconWidth,\n                height: iconHeight,\n            }]}>\n                {orientation === \"front\" ? <FrontSelfieIcon /> : <SideSelfieIcon />}\n            </View>\n\n            {/* Flèche directionnelle pour les orientations latérales */}\n            {orientation !== \"front\" ? (\n                <View style={[\n                    styles.arrowContainer,\n                    {\n                        top: iconY + iconHeight / 2 - 50, // Centré verticalement par rapport à l'icône\n                        left: orientation === \"left\" ? iconX - 72 : 'auto',\n                        right: orientation === \"right\" ? iconX-75: 'auto'\n                    }\n                ]}>\n                    <Image\n                        source={require('../Svgs/directionArrow.gif')}\n                        resizeMode=\"contain\"\n                        style={[\n                            styles.arrowImage,\n                            { transform: orientation === \"right\" ? [{ scaleX: -1 }] : [] }\n                        ]}\n                    />\n                </View>\n            ) : null}\n\n            <View style={styles.bottomIntruction}>\n                <Text style={styles.bottomTitle}>\n                    {instructionsTile}\n                </Text>\n                <Text style={styles.bottomSubtitle}>\n                    {instructionsSubtitle}\n                </Text>\n            </View>\n        </View>\n    )\n}\n\nexport default SelfieOverlay;\n\n\nconst styles = StyleSheet.create({\n    overlay: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '50%',\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n    },\n    svg: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n    },\n    topIntruction: {\n        zIndex: 1000,\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        paddingVertical: 20,\n        paddingHorizontal: 10,\n        marginHorizontal: 20,\n        marginTop: 10,\n        backgroundColor: \"#FDE04730\",\n        borderColor: \"#FDE047\",\n        borderWidth: 1,\n        borderRadius: 10,\n        gap: 10,\n    },\n    topIntructionText: {\n        color: '#FDE047',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntruction: {\n        position: 'absolute',\n        bottom: 0,\n        left: 0,\n        width: '100%',\n        height: '35%',\n        paddingHorizontal: 20,\n    },\n    bottomIntructionTextBold: {\n        color: 'white',\n        fontSize: 16,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomIntructionText: {\n        color: 'white',\n        fontSize: 14,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomTitle: {\n        color: 'white',\n        fontSize: 25,\n        fontWeight: 'bold',\n        textAlign: 'center',\n    },\n    bottomSubtitle: {\n        color: 'white',\n        marginTop: 15,\n        fontSize: 14,\n        fontWeight: '500',\n        textAlign: 'center',\n    },\n\n\n    image: {\n        position: 'absolute',\n        borderRadius: 10,\n    },\n    iconContainer: {\n        position: 'absolute',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    arrowContainer: {\n        position: 'absolute',\n        width: 100,\n        height: 100,\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    arrowImage: {\n        width: 100,\n        height: 100,\n        objectFit: 'contain',\n    },\n})\n"]}

package/build/components/OverLay/StepOverlay.d.ts

@@ -0,0 +1,9 @@
+interface StepOverlayProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: number;
+}
+declare const StepOverlay: ({ back, selectedDocumentType, step, totalSteps }: StepOverlayProps) => import("react").JSX.Element;
+export default StepOverlay;
+//# sourceMappingURL=StepOverlay.d.ts.map

package/build/components/OverLay/StepOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/OverLay/StepOverlay.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACtB;AACD,QAAA,MAAM,WAAW,GAAI,kDAAkD,gBAAgB,gCActF,CAAA;AAuCD,eAAe,WAAW,CAAC"}

package/build/components/OverLay/StepOverlay.js

@@ -0,0 +1,51 @@
+import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
+const StepOverlay = ({ back, selectedDocumentType, step, totalSteps }) => {
+    return (<View style={styles.stepperContainer}>
+            <TouchableOpacity onPress={back} style={styles.back}>
+                <Text style={styles.stepperItemText}> {`<`} </Text>
+            </TouchableOpacity>
+            <View style={styles.stepperItem}>
+                <Text style={styles.stepperItemText}>{selectedDocumentType}</Text>
+            </View>
+            <View style={styles.stepperDetails}>
+                <Text style={styles.stepperDetailsText}>Step {step} of {totalSteps}</Text>
+            </View>
+        </View>);
+};
+const styles = StyleSheet.create({
+    stepperContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingVertical: 15,
+        // backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+    },
+    stepperItem: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepperDetails: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepperItemText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    stepperDetailsText: {
+        color: 'white',
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    back: {
+        // flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+export default StepOverlay;
+//# sourceMappingURL=StepOverlay.js.map

package/build/components/OverLay/StepOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOverlay.js","sourceRoot":"","sources":["../../../src/components/OverLay/StepOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQxE,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAU,EAAoB,EAAE,EAAE;IACvF,OAAO,CACH,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACjC;YAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAChD;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAE,CAAA,CAAC,GAAG,CAAE,CAAA,EAAE,IAAI,CACtD;YAAA,EAAE,gBAAgB,CAClB;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC5B;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE,IAAI,CACrE;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAC/B;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAE,IAAG,CAAC,UAAU,CAAC,EAAE,IAAI,CAC7E;YAAA,EAAE,IAAI,CACV;QAAA,EAAE,IAAI,CAAC,CACV,CAAA;AACL,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC7B,gBAAgB,EAAE;QACd,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,yCAAyC;QACzC,MAAM,EAAE,IAAI;KACf;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;IACD,cAAc,EAAE;QAEZ,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;IACD,eAAe,EAAE;QACb,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;KACrB;IACD,kBAAkB,EAAE;QAChB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KACpB;IACD,IAAI,EAAE;QACF,WAAW;QACX,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAA;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { StyleSheet, View, TouchableOpacity, Text } from \"react-native\";\n\ninterface StepOverlayProps {\n    back: () => void;\n    selectedDocumentType: string;\n    step: number;\n    totalSteps: number;\n}\nconst StepOverlay = ({ back, selectedDocumentType, step, totalSteps }: StepOverlayProps) => {\n    return (\n        <View style={styles.stepperContainer}>\n            <TouchableOpacity onPress={back} style={styles.back}>\n                <Text style={styles.stepperItemText}> {`<`} </Text>\n            </TouchableOpacity>\n            <View style={styles.stepperItem}>\n                <Text style={styles.stepperItemText}>{selectedDocumentType}</Text>\n            </View>\n            <View style={styles.stepperDetails}>\n                <Text style={styles.stepperDetailsText}>Step {step} of {totalSteps}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    stepperContainer: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        paddingHorizontal: 20,\n        paddingVertical: 15,\n        // backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 1000,\n    },\n    stepperItem: {\n        flex: 1,\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    stepperDetails: {\n\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    stepperItemText: {\n        color: 'white',\n        fontSize: 20,\n        fontWeight: 'bold',\n    },\n    stepperDetailsText: {\n        color: 'white',\n        fontSize: 12,\n        fontWeight: '500',\n    },\n    back: {\n        // flex: 1,\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n})\n\nexport default StepOverlay;"]}

package/build/components/OverLay/type.d.ts

@@ -0,0 +1,21 @@
+export interface IdCardOverlayProps {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+    cornerOpacity: number;
+    instructions: string;
+    cornerColor?: string;
+    stepperProps?: StepperProps;
+    instructionsTile?: string;
+    instructionsSubtitle?: string;
+    orientation?: 'front' | 'left' | 'right';
+}
+interface StepperProps {
+    back: () => void;
+    selectedDocumentType: string;
+    step: number;
+    totalSteps: number;
+}
+export {};
+//# sourceMappingURL=type.d.ts.map

package/build/components/OverLay/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/components/OverLay/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C;AAGD,UAAU,YAAY;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACtB"}

package/build/components/OverLay/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/build/components/OverLay/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/components/OverLay/type.ts"],"names":[],"mappings":"","sourcesContent":["export interface IdCardOverlayProps {\n    xMin: number;\n    yMin: number;\n    xMax: number;\n    yMax: number;\n    cornerOpacity: number;\n    instructions: string;\n    cornerColor?: string;\n    stepperProps?: StepperProps;\n    instructionsTile?: string;\n    instructionsSubtitle?: string;\n    orientation?: 'front' | 'left' | 'right';\n}\n\n\ninterface StepperProps {\n    back: () => void;\n    selectedDocumentType: string;\n    step: number;\n    totalSteps: number;\n}"]}

package/build/components/ProgressIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+}
+export declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export {};
+//# sourceMappingURL=ProgressIndicator.d.ts.map

package/build/components/ProgressIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ProgressIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0B9D,CAAC"}

package/build/components/ProgressIndicator.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+export const ProgressIndicator = ({ currentStep, totalSteps }) => {
+    const progress = (currentStep / (totalSteps - 1)) * 100;
+    return (<View style={styles.container}>
+      {/* Barre de progression */}
+      <View style={styles.progressBarContainer}>
+        <View style={[styles.progressBar, { width: `${progress}%` }]}/>
+      </View>
+      
+      {/* Indicateur textuel */}
+      <View style={styles.textContainer}>
+        <Text style={styles.progressText}>
+          Étape {currentStep + 1} sur {totalSteps}
+        </Text>
+        <Text style={styles.progressText}>
+          {Math.round(progress)}%
+        </Text>
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    progressBarContainer: {
+        width: '100%',
+        height: 8,
+        backgroundColor: '#E5E5E5',
+        borderRadius: 4,
+        overflow: 'hidden',
+    },
+    progressBar: {
+        height: '100%',
+        backgroundColor: '#4CAF50',
+        borderRadius: 4,
+    },
+    textContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 8,
+    },
+    progressText: {
+        fontSize: 12,
+        color: '#666',
+    },
+});
+//# sourceMappingURL=ProgressIndicator.js.map

package/build/components/ProgressIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../src/components/ProgressIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAOtD,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,WAAW,EACX,UAAU,EACX,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,WAAW,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;IAExD,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,0BAA0B,CAC3B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACvC;QAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAC,EAE3D;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,wBAAwB,CACzB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;gBAAM,CAAC,WAAW,GAAG,CAAC,CAAE,KAAI,CAAC,UAAU,CACzC;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACxB,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,oBAAoB,EAAE;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ;KACnB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,SAAS,EAAE,CAAC;KACb;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\ninterface ProgressIndicatorProps {\n  currentStep: number;\n  totalSteps: number;\n}\n\nexport const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({\n  currentStep,\n  totalSteps\n}) => {\n  const progress = (currentStep / (totalSteps - 1)) * 100;\n\n  return (\n    <View style={styles.container}>\n      {/* Barre de progression */}\n      <View style={styles.progressBarContainer}>\n        <View \n          style={[styles.progressBar, { width: `${progress}%` }]}\n        />\n      </View>\n      \n      {/* Indicateur textuel */}\n      <View style={styles.textContainer}>\n        <Text style={styles.progressText}>\n          Étape {currentStep + 1} sur {totalSteps}\n        </Text>\n        <Text style={styles.progressText}>\n          {Math.round(progress)}%\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n  },\n  progressBarContainer: {\n    width: '100%',\n    height: 8,\n    backgroundColor: '#E5E5E5',\n    borderRadius: 4,\n    overflow: 'hidden',\n  },\n  progressBar: {\n    height: '100%',\n    backgroundColor: '#4CAF50',\n    borderRadius: 4,\n  },\n  textContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: 8,\n  },\n  progressText: {\n    fontSize: 12,\n    color: '#666',\n  },\n}); "]}

package/build/components/SelfieCapture.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SelfieCapture: React.FC;
+//# sourceMappingURL=SelfieCapture.d.ts.map

package/build/components/SelfieCapture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCapture.d.ts","sourceRoot":"","sources":["../../src/components/SelfieCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAoJjC,CAAC"}

package/build/components/SelfieCapture.js

@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, Image, Alert, StyleSheet } from 'react-native';
+import { useKYCStore } from '../stores/kycStore';
+import VisionCameraModule from '../modules/camera/VisionCameraModule';
+import { EnhancedCameraView } from './EnhancedCameraView';
+export const SelfieCapture = () => {
+    const [capturedSelfie, setCapturedSelfie] = useState(null);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [showCamera, setShowCamera] = useState(false);
+    const { setSelfie, setProcessing } = useKYCStore();
+    const instructions = "Placez votre visage dans le cadre et souriez naturellement. Assurez-vous que votre visage est bien éclairé et centré.";
+    useEffect(() => {
+        // Check camera availability on component mount
+        const checkCameraAvailability = async () => {
+            const isAvailable = await VisionCameraModule.isCameraAvailable();
+            if (!isAvailable) {
+                Alert.alert('Erreur', 'Caméra non disponible sur cette plateforme');
+            }
+        };
+        checkCameraAvailability();
+    }, []);
+    const handleCapture = async () => {
+        try {
+            setIsCapturing(true);
+            setProcessing(true);
+            const hasPermissions = await VisionCameraModule.requestAllPermissions();
+            if (!hasPermissions) {
+                Alert.alert('Permission refusée', 'Nous avons besoin de l\'accès à la caméra et au microphone');
+                setIsCapturing(false);
+                setProcessing(false);
+                return;
+            }
+            setShowCamera(true);
+        }
+        catch (error) {
+            Alert.alert('Erreur', 'Impossible d\'ouvrir la caméra');
+            setIsCapturing(false);
+            setProcessing(false);
+        }
+    };
+    const handleCaptureSuccess = (imagePath) => {
+        setCapturedSelfie(imagePath);
+        setSelfie(imagePath);
+        setShowCamera(false);
+        setIsCapturing(false);
+        setProcessing(false);
+    };
+    const handleRetake = () => {
+        setCapturedSelfie(null);
+        setShowCamera(false);
+    };
+    const handleCameraCapture = (result) => {
+        if (result.success && result.path) {
+            handleCaptureSuccess(result.path);
+        }
+        else {
+            Alert.alert('Erreur', result.error || 'Échec de la capture');
+            setIsCapturing(false);
+            setProcessing(false);
+        }
+    };
+    const handleCameraError = (event) => {
+        Alert.alert('Erreur', event.message || 'Une erreur est survenue');
+        setShowCamera(false);
+        setIsCapturing(false);
+        setProcessing(false);
+    };
+    const handleCloseCamera = () => {
+        setShowCamera(false);
+        setIsCapturing(false);
+        setProcessing(false);
+    };
+    if (showCamera) {
+        return (<View style={styles.container}>
+        <EnhancedCameraView instructions={instructions} showCamera={true} cameraType="front" onCapture={handleCameraCapture} onError={handleCameraError} onClose={handleCloseCamera} quality="high" showCaptureButton={true} showSwitchCamera={false} overlayComponent={<View style={styles.selfieOverlay}>
+              <View style={styles.faceFrame}/>
+            </View>}/>
+      </View>);
+    }
+    return (<View style={styles.container}>
+      {capturedSelfie ? (<View style={styles.previewContainer}>
+          <View style={styles.imageContainer}>
+            <Image source={{ uri: `file://${capturedSelfie}` }} style={styles.previewImage} resizeMode="cover"/>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={[styles.button, styles.retakeButton]} onPress={handleRetake}>
+              <Text style={styles.buttonText}>Reprendre</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={[styles.button, styles.validateButton]} onPress={() => { }}>
+              <Text style={styles.buttonText}>Valider</Text>
+            </TouchableOpacity>
+          </View>
+        </View>) : (<View style={styles.captureContainer}>
+          <Text style={styles.title}>Capture de selfie</Text>
+          <Text style={styles.instructions}>
+            {instructions}
+          </Text>
+          
+          <TouchableOpacity style={[styles.button, styles.captureButton]} onPress={handleCapture} disabled={isCapturing}>
+            <Text style={styles.buttonText}>
+              {isCapturing ? 'Ouverture...' : '📸 Prendre une photo'}
+            </Text>
+          </TouchableOpacity>
+        </View>)}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f5f5f5',
+    },
+    captureContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333',
+        marginBottom: 20,
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        textAlign: 'center',
+        marginBottom: 40,
+        lineHeight: 24,
+    },
+    previewContainer: {
+        flex: 1,
+        padding: 20,
+    },
+    imageContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    previewImage: {
+        width: 250,
+        height: 250,
+        borderRadius: 125,
+        borderWidth: 3,
+        borderColor: '#4CAF50',
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: 15,
+    },
+    button: {
+        flex: 1,
+        paddingVertical: 15,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    captureButton: {
+        backgroundColor: '#4CAF50',
+    },
+    retakeButton: {
+        backgroundColor: '#FF9800',
+    },
+    validateButton: {
+        backgroundColor: '#2196F3',
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    selfieOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none',
+    },
+    faceFrame: {
+        width: 250,
+        height: 300,
+        borderWidth: 3,
+        borderColor: '#4CAF50',
+        borderRadius: 125,
+        backgroundColor: 'transparent',
+    },
+});
+//# sourceMappingURL=SelfieCapture.js.map

package/build/components/SelfieCapture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelfieCapture.js","sourceRoot":"","sources":["../../src/components/SelfieCapture.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { View, Text, TouchableOpacity, Image, Alert, StyleSheet } from 'react-native';\nimport { useKYCStore } from '../stores/kycStore';\nimport VisionCameraModule from '../modules/camera/VisionCameraModule';\nimport { EnhancedCameraView } from './EnhancedCameraView';\n\nexport const SelfieCapture: React.FC = () => {\n  const [capturedSelfie, setCapturedSelfie] = useState<string | null>(null);\n  const [isCapturing, setIsCapturing] = useState(false);\n  const [showCamera, setShowCamera] = useState(false);\n  const { setSelfie, setProcessing } = useKYCStore();\n\n  const instructions = \"Placez votre visage dans le cadre et souriez naturellement. Assurez-vous que votre visage est bien éclairé et centré.\";\n\n  useEffect(() => {\n    // Check camera availability on component mount\n    const checkCameraAvailability = async () => {\n      const isAvailable = await VisionCameraModule.isCameraAvailable();\n      if (!isAvailable) {\n        Alert.alert('Erreur', 'Caméra non disponible sur cette plateforme');\n      }\n    };\n    \n    checkCameraAvailability();\n  }, []);\n\n  const handleCapture = async () => {\n    try {\n      setIsCapturing(true);\n      setProcessing(true);\n\n      const hasPermissions = await VisionCameraModule.requestAllPermissions();\n      if (!hasPermissions) {\n        Alert.alert('Permission refusée', 'Nous avons besoin de l\\'accès à la caméra et au microphone');\n        setIsCapturing(false);\n        setProcessing(false);\n        return;\n      }\n\n      setShowCamera(true);\n    } catch (error) {\n      Alert.alert('Erreur', 'Impossible d\\'ouvrir la caméra');\n      setIsCapturing(false);\n      setProcessing(false);\n    }\n  };\n\n  const handleCaptureSuccess = (imagePath: string) => {\n    setCapturedSelfie(imagePath);\n    setSelfie(imagePath);\n    setShowCamera(false);\n    setIsCapturing(false);\n    setProcessing(false);\n  };\n\n  const handleRetake = () => {\n    setCapturedSelfie(null);\n    setShowCamera(false);\n  };\n\n  const handleCameraCapture = (result: { success: boolean; path?: string; error?: string }) => {\n    if (result.success && result.path) {\n      handleCaptureSuccess(result.path);\n    } else {\n      Alert.alert('Erreur', result.error || 'Échec de la capture');\n      setIsCapturing(false);\n      setProcessing(false);\n    }\n  };\n\n  const handleCameraError = (event: { message: string }) => {\n    Alert.alert('Erreur', event.message || 'Une erreur est survenue');\n    setShowCamera(false);\n    setIsCapturing(false);\n    setProcessing(false);\n  };\n\n  const handleCloseCamera = () => {\n    setShowCamera(false);\n    setIsCapturing(false);\n    setProcessing(false);\n  };\n\n  if (showCamera) {\n    return (\n      <View style={styles.container}>\n        <EnhancedCameraView\n          instructions={instructions}\n          showCamera={true}\n          cameraType=\"front\"\n          onCapture={handleCameraCapture}\n          onError={handleCameraError}\n          onClose={handleCloseCamera}\n          quality=\"high\"\n          showCaptureButton={true}\n          showSwitchCamera={false}\n          overlayComponent={\n            <View style={styles.selfieOverlay}>\n              <View style={styles.faceFrame} />\n            </View>\n          }\n        />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      {capturedSelfie ? (\n        <View style={styles.previewContainer}>\n          <View style={styles.imageContainer}>\n            <Image\n              source={{ uri: `file://${capturedSelfie}` }}\n              style={styles.previewImage}\n              resizeMode=\"cover\"\n            />\n          </View>\n\n          <View style={styles.buttonContainer}>\n            <TouchableOpacity\n              style={[styles.button, styles.retakeButton]}\n              onPress={handleRetake}\n            >\n              <Text style={styles.buttonText}>Reprendre</Text>\n            </TouchableOpacity>\n\n            <TouchableOpacity\n              style={[styles.button, styles.validateButton]}\n              onPress={() => {/* Navigation vers l'étape suivante */}}\n            >\n              <Text style={styles.buttonText}>Valider</Text>\n            </TouchableOpacity>\n          </View>\n        </View>\n      ) : (\n        <View style={styles.captureContainer}>\n          <Text style={styles.title}>Capture de selfie</Text>\n          <Text style={styles.instructions}>\n            {instructions}\n          </Text>\n          \n          <TouchableOpacity\n            style={[styles.button, styles.captureButton]}\n            onPress={handleCapture}\n            disabled={isCapturing}\n          >\n            <Text style={styles.buttonText}>\n              {isCapturing ? 'Ouverture...' : '📸 Prendre une photo'}\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  captureContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 20,\n    textAlign: 'center',\n  },\n  instructions: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 40,\n    lineHeight: 24,\n  },\n  previewContainer: {\n    flex: 1,\n    padding: 20,\n  },\n  imageContainer: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginBottom: 20,\n  },\n  previewImage: {\n    width: 250,\n    height: 250,\n    borderRadius: 125,\n    borderWidth: 3,\n    borderColor: '#4CAF50',\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    gap: 15,\n  },\n  button: {\n    flex: 1,\n    paddingVertical: 15,\n    paddingHorizontal: 20,\n    borderRadius: 10,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  captureButton: {\n    backgroundColor: '#4CAF50',\n  },\n  retakeButton: {\n    backgroundColor: '#FF9800',\n  },\n  validateButton: {\n    backgroundColor: '#2196F3',\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  selfieOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    justifyContent: 'center',\n    alignItems: 'center',\n    pointerEvents: 'none',\n  },\n  faceFrame: {\n    width: 250,\n    height: 300,\n    borderWidth: 3,\n    borderColor: '#4CAF50',\n    borderRadius: 125,\n    backgroundColor: 'transparent',\n  },\n}); "]}

package/build/components/SimpleExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SimpleExample: React.FC;
+//# sourceMappingURL=SimpleExample.d.ts.map

package/build/components/SimpleExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleExample.d.ts","sourceRoot":"","sources":["../../src/components/SimpleExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAkCjC,CAAC"}