@umituz/react-native-ai-generation-content 1.17.207 → 1.17.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.207",
+  "version": "1.17.209",
   "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",
+  },
+});

package/src/features/meme-generator/presentation/screens/MemeGeneratorScreen.tsx

@@ -75,7 +75,7 @@ export const MemeGeneratorScreen: React.FC<MemeGeneratorScreenProps> = ({
       aspectRatio: 1,
       width: "100%",
       backgroundColor: tokens.colors.backgroundSecondary,
-      borderRadius: tokens.borderRadius.lg,
+      borderRadius: tokens.radius.lg,
       justifyContent: "center",
       alignItems: "center",
       marginBottom: tokens.spacing.xl,

package/src/presentation/components/buttons/GenerateButton.tsx

@@ -82,7 +82,7 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
               backgroundColor: disabled
                 ? tokens.colors.surfaceSecondary
                 : tokens.colors.primary,
-              borderRadius: tokens.borderRadius.lg,
+              borderRadius: tokens.radius.lg,
               flex: 1,
             },
           ]}
@@ -108,7 +108,7 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
               styles.accessory,
               {
                 backgroundColor: tokens.colors.surfaceSecondary,
-                borderRadius: tokens.borderRadius.lg,
+                borderRadius: tokens.radius.lg,
               },
             ]}
           >

package/src/types/globals.d.ts

@@ -6,3 +6,76 @@ declare const console: {
   info: (...args: unknown[]) => void;
   debug: (...args: unknown[]) => void;
 };
+
+// React Native + React 19 compatibility fix
+// https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/67742
+declare module 'react-native' {
+  import type {
+    ComponentType,
+    ReactElement,
+    JSXElementConstructor,
+    ReactNode,
+  } from 'react';
+
+  export interface ViewProps {
+    children?: ReactNode;
+    style?: any;
+    testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: string;
+    accessibilityState?: any;
+    onLayout?: (event: any) => void;
+    pointerEvents?: 'box-none' | 'box-only' | 'auto' | 'none';
+    hitSlop?: any;
+    removeClippedSubviews?: boolean;
+    collapsable?: boolean;
+    needsOffscreenAlphaCompositing?: boolean;
+    renderToHardwareTextureAndroid?: boolean;
+    shouldRasterizeIOS?: boolean;
+    onAccessibilityTap?: () => void;
+    onMagicTap?: () => void;
+    [key: string]: any;
+  }
+
+  export interface TextProps {
+    children?: ReactNode;
+    style?: any;
+    testID?: string;
+    numberOfLines?: number;
+    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    allowFontScaling?: boolean;
+    adjustsFontSizeToFit?: boolean;
+    minimumFontScale?: number;
+    maxFontSizeMultiplier?: number;
+    selectable?: boolean;
+    selectionColor?: string;
+    accessibilityLabel?: string;
+    [key: string]: any;
+  }
+
+  export const View: ComponentType<ViewProps>;
+  export const Text: ComponentType<TextProps>;
+  export const Image: ComponentType<any>;
+  export const ScrollView: ComponentType<any>;
+  export const FlatList: ComponentType<any>;
+  export const SectionList: ComponentType<any>;
+  export const TextInput: ComponentType<any>;
+  export const TouchableOpacity: ComponentType<any>;
+  export const TouchableHighlight: ComponentType<any>;
+  export const TouchableWithoutFeedback: ComponentType<any>;
+  export const Pressable: ComponentType<any>;
+  export const ActivityIndicator: ComponentType<any>;
+  export const Modal: ComponentType<any>;
+  export const SafeAreaView: ComponentType<any>;
+  export const KeyboardAvoidingView: ComponentType<any>;
+  export const StatusBar: ComponentType<any>;
+  export const Animated: {
+    View: ComponentType<any>;
+    Text: ComponentType<any>;
+    Image: ComponentType<any>;
+    ScrollView: ComponentType<any>;
+    [key: string]: any;
+  };
+}