@umituz/react-native-ai-generation-content 1.17.206 → 1.17.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.206",
+  "version": "1.17.208",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/face-detection/index.ts

@@ -24,3 +24,4 @@ export { analyzeImageForFace } from "./infrastructure/analyzers/faceAnalyzer";
 export { useFaceDetection } from "./presentation/hooks/useFaceDetection";
 
 export { FaceValidationStatus } from "./presentation/components/FaceValidationStatus";
+export { FaceDetectionToggle } from "./presentation/components/FaceDetectionToggle";

package/src/domains/face-detection/presentation/components/FaceDetectionToggle.tsx

@@ -0,0 +1,114 @@
+/**
+ * FaceDetectionToggle Component
+ *
+ * A simple toggle switch for enabling/disabling AI face detection.
+ */
+
+import React from "react";
+import { View, StyleSheet, Switch } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface FaceDetectionToggleProps {
+  isEnabled: boolean;
+  onToggle: (value: boolean) => void;
+  label: string;
+  /** Hide the toggle temporarily - set to true to hide without removing the component */
+  hidden?: boolean;
+}
+
+export const FaceDetectionToggle: React.FC<FaceDetectionToggleProps> = ({
+  isEnabled,
+  onToggle,
+  label,
+  hidden = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Return null if hidden - component is still here but not rendered
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderColor: isEnabled
+            ? tokens.colors.primary
+            : tokens.colors.borderLight,
+        },
+      ]}
+    >
+      <View style={styles.content}>
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              backgroundColor: isEnabled
+                ? tokens.colors.primary + "20"
+                : tokens.colors.backgroundPrimary,
+            },
+          ]}
+        >
+          <AtomicIcon
+            name="scan"
+            size={20}
+            customColor={
+              isEnabled ? tokens.colors.primary : tokens.colors.textSecondary
+            }
+          />
+        </View>
+        <AtomicText
+          style={[styles.label, { color: tokens.colors.textPrimary }]}
+        >
+          {label}
+        </AtomicText>
+      </View>
+      <Switch
+        value={isEnabled}
+        onValueChange={onToggle}
+        trackColor={{
+          false: tokens.colors.borderLight,
+          true: tokens.colors.primary,
+        }}
+        thumbColor={tokens.colors.onPrimary}
+        ios_backgroundColor={tokens.colors.borderLight}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});