@umituz/react-native-auth 3.5.6 → 3.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.5.6",
+  "version": "3.5.8",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -61,7 +61,7 @@
     "@types/react": "~19.1.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@umituz/react-native-design-system": "^2.8.36",
+    "@umituz/react-native-design-system": "^2.8.39",
     "@umituz/react-native-design-system-theme": "*",
     "eslint": "^8.57.0",
     "expo-apple-authentication": "^6.0.0",

package/src/index.ts

@@ -168,9 +168,7 @@ export type {
 } from './presentation/navigation/AuthNavigator';
 
 // COMPONENTS
-export { AuthContainer } from './presentation/components/AuthContainer';
 export { AuthHeader } from './presentation/components/AuthHeader';
-export { AuthFormCard } from './presentation/components/AuthFormCard';
 export { LoginForm } from './presentation/components/LoginForm';
 export { RegisterForm } from './presentation/components/RegisterForm';
 export { AuthLegalLinks } from './presentation/components/AuthLegalLinks';

package/src/presentation/components/AuthErrorDisplay.tsx

@@ -4,8 +4,11 @@
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AlertInline,
+  AlertService,
+  AlertMode,
+} from "@umituz/react-native-design-system";
 
 interface AuthErrorDisplayProps {
   error: string | null;
@@ -14,46 +17,20 @@ interface AuthErrorDisplayProps {
 export const AuthErrorDisplay: React.FC<AuthErrorDisplayProps> = ({
   error,
 }) => {
-  const tokens = useAppDesignTokens();
-
-  if (!error) {
+  const alert = React.useMemo(() => {
+    if (!error) return null;
+    return AlertService.createErrorAlert(error, undefined, {
+      mode: AlertMode.INLINE,
+    });
+  }, [error]);
+
+  if (!alert) {
     return null;
   }
 
-  return (
-    <View
-      style={[
-        styles.errorContainer,
-        {
-          backgroundColor: tokens.colors.errorLight,
-          borderColor: tokens.colors.error,
-        },
-      ]}
-    >
-      <AtomicText
-        type="bodyMedium"
-        style={[styles.errorText, { color: tokens.colors.error }]}
-      >
-        {error}
-      </AtomicText>
-    </View>
-  );
+  return <AlertInline alert={alert} />;
 };
 
-const styles = StyleSheet.create({
-  errorContainer: {
-    marginBottom: 16,
-    padding: 14,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: "center",
-    fontWeight: "500",
-  },
-});
-
 
 
 

package/src/presentation/components/AuthHeader.tsx

@@ -21,15 +21,16 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
     <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: tokens.spacing.md }]}>
       <AtomicText
         type="headlineLarge"
-        style={{ color: tokens.colors.onPrimary, textAlign: "center" }}
+        color="onPrimary"
+        style={{ textAlign: "center" }}
       >
         {title}
       </AtomicText>
       {(subtitle || t("auth.subtitle")) && (
         <AtomicText
           type="bodyMedium"
+          color="textInverse"
           style={{
-            color: tokens.colors.textInverse,
             textAlign: "center",
             marginTop: tokens.spacing.xs,
           }}

package/src/presentation/components/AuthLegalLinks.tsx

@@ -79,13 +79,11 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
         {hasTerms && (
           <AtomicButton
             variant="text"
+            size="sm"
             onPress={handleTermsPress}
             style={styles.linkButton}
-          >
-            <AtomicText type="bodySmall" color="primary">
-              {t("auth.termsOfService")}
-            </AtomicText>
-          </AtomicButton>
+            title={t("auth.termsOfService")}
+          />
         )}
         {hasTerms && hasPrivacy && (
           <AtomicText type="bodySmall" color="secondary" style={styles.separator}>
@@ -95,13 +93,11 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
         {hasPrivacy && (
           <AtomicButton
             variant="text"
+            size="sm"
             onPress={handlePrivacyPress}
             style={styles.linkButton}
-          >
-            <AtomicText type="bodySmall" color="primary">
-              {t("auth.privacyPolicy")}
-            </AtomicText>
-          </AtomicButton>
+            title={t("auth.privacyPolicy")}
+          />
         )}
       </View>
     </View>

package/src/presentation/components/LoginForm.tsx

@@ -49,56 +49,52 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
 
   return (
     <>
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          label={t("auth.email")}
-          value={email}
-          onChangeText={handleEmailChange}
-          placeholder={t("auth.emailPlaceholder")}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          disabled={loading}
-          state={emailError ? "error" : "default"}
-          helperText={emailError || undefined}
-          returnKeyType="next"
-          onSubmitEditing={() => passwordRef.current?.focus()}
-          blurOnSubmit={false}
-          textContentType="emailAddress"
-        />
-      </View>
+      <AtomicInput
+        label={t("auth.email")}
+        value={email}
+        onChangeText={handleEmailChange}
+        placeholder={t("auth.emailPlaceholder")}
+        keyboardType="email-address"
+        autoCapitalize="none"
+        disabled={loading}
+        state={emailError ? "error" : "default"}
+        helperText={emailError || undefined}
+        returnKeyType="next"
+        onSubmitEditing={() => passwordRef.current?.focus()}
+        blurOnSubmit={false}
+        textContentType="emailAddress"
+        style={styles.input}
+      />
 
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          ref={passwordRef}
-          label={t("auth.password")}
-          value={password}
-          onChangeText={handlePasswordChange}
-          placeholder={t("auth.passwordPlaceholder")}
-          secureTextEntry
-          showPasswordToggle
-          autoCapitalize="none"
-          disabled={loading}
-          state={passwordError ? "error" : "default"}
-          helperText={passwordError || undefined}
-          returnKeyType="done"
-          onSubmitEditing={() => { void handleSignIn(); }}
-          textContentType="password"
-        />
-      </View>
+      <AtomicInput
+        ref={passwordRef}
+        label={t("auth.password")}
+        value={password}
+        onChangeText={handlePasswordChange}
+        placeholder={t("auth.passwordPlaceholder")}
+        secureTextEntry
+        showPasswordToggle
+        autoCapitalize="none"
+        disabled={loading}
+        state={passwordError ? "error" : "default"}
+        helperText={passwordError || undefined}
+        returnKeyType="done"
+        onSubmitEditing={() => { void handleSignIn(); }}
+        textContentType="password"
+        style={styles.input}
+      />
 
       <AuthErrorDisplay error={displayError} />
 
-      <View style={styles.buttonContainer}>
-        <AtomicButton
-          variant="primary"
-          onPress={() => { void handleSignIn(); }}
-          disabled={loading || !email.trim() || !password.trim()}
-          fullWidth
-          style={styles.signInButton}
-        >
-          {t("auth.signIn")}
-        </AtomicButton>
-      </View>
+      <AtomicButton
+        variant="primary"
+        onPress={() => { void handleSignIn(); }}
+        disabled={loading || !email.trim() || !password.trim()}
+        fullWidth
+        style={styles.signInButton}
+      >
+        {t("auth.signIn")}
+      </AtomicButton>
 
       <AuthLink
         text={t("auth.dontHaveAccount")}
@@ -111,13 +107,11 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
 };
 
 const styles = StyleSheet.create({
-  inputContainer: {
+  input: {
     marginBottom: 20,
   },
-  buttonContainer: {
-    marginBottom: 16,
-  },
   signInButton: {
     minHeight: 52,
+    marginBottom: 16,
   },
 });

package/src/presentation/components/RegisterForm.tsx

@@ -53,108 +53,102 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
   return (
     <>
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          label={t("auth.displayName")}
-          value={displayName}
-          onChangeText={handleDisplayNameChange}
-          placeholder={
-            t("auth.displayNamePlaceholder")
-          }
-          autoCapitalize="words"
-          disabled={loading}
-          state={fieldErrors.displayName ? "error" : "default"}
-          helperText={fieldErrors.displayName || undefined}
-          returnKeyType="next"
-          onSubmitEditing={() => emailRef.current?.focus()}
-          blurOnSubmit={false}
-        />
-      </View>
+      <AtomicInput
+        label={t("auth.displayName")}
+        value={displayName}
+        onChangeText={handleDisplayNameChange}
+        placeholder={
+          t("auth.displayNamePlaceholder")
+        }
+        autoCapitalize="words"
+        disabled={loading}
+        state={fieldErrors.displayName ? "error" : "default"}
+        helperText={fieldErrors.displayName || undefined}
+        returnKeyType="next"
+        onSubmitEditing={() => emailRef.current?.focus()}
+        blurOnSubmit={false}
+        style={styles.input}
+      />
 
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          ref={emailRef}
-          label={t("auth.email")}
-          value={email}
-          onChangeText={handleEmailChange}
-          placeholder={t("auth.emailPlaceholder")}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          disabled={loading}
-          state={fieldErrors.email ? "error" : "default"}
-          helperText={fieldErrors.email || undefined}
-          returnKeyType="next"
-          onSubmitEditing={() => passwordRef.current?.focus()}
-          blurOnSubmit={false}
-          textContentType="emailAddress"
-        />
-      </View>
+      <AtomicInput
+        ref={emailRef}
+        label={t("auth.email")}
+        value={email}
+        onChangeText={handleEmailChange}
+        placeholder={t("auth.emailPlaceholder")}
+        keyboardType="email-address"
+        autoCapitalize="none"
+        disabled={loading}
+        state={fieldErrors.email ? "error" : "default"}
+        helperText={fieldErrors.email || undefined}
+        returnKeyType="next"
+        onSubmitEditing={() => passwordRef.current?.focus()}
+        blurOnSubmit={false}
+        textContentType="emailAddress"
+        style={styles.input}
+      />
 
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          ref={passwordRef}
-          label={t("auth.password")}
-          value={password}
-          onChangeText={handlePasswordChange}
-          placeholder={t("auth.passwordPlaceholder")}
-          secureTextEntry
-          showPasswordToggle
-          autoCapitalize="none"
-          disabled={loading}
-          state={fieldErrors.password ? "error" : "default"}
-          helperText={fieldErrors.password || undefined}
-          returnKeyType="next"
-          onSubmitEditing={() => confirmPasswordRef.current?.focus()}
-          blurOnSubmit={false}
-          textContentType="newPassword"
-        />
-        {password.length > 0 && (
-          <PasswordStrengthIndicator requirements={passwordRequirements} />
-        )}
-      </View>
+      <AtomicInput
+        ref={passwordRef}
+        label={t("auth.password")}
+        value={password}
+        onChangeText={handlePasswordChange}
+        placeholder={t("auth.passwordPlaceholder")}
+        secureTextEntry
+        showPasswordToggle
+        autoCapitalize="none"
+        disabled={loading}
+        state={fieldErrors.password ? "error" : "default"}
+        helperText={fieldErrors.password || undefined}
+        returnKeyType="next"
+        onSubmitEditing={() => confirmPasswordRef.current?.focus()}
+        blurOnSubmit={false}
+        textContentType="newPassword"
+        style={styles.input}
+      />
+      {password.length > 0 && (
+        <PasswordStrengthIndicator requirements={passwordRequirements} />
+      )}
 
-      <View style={styles.inputContainer}>
-        <AtomicInput
-          ref={confirmPasswordRef}
-          label={t("auth.confirmPassword")}
-          value={confirmPassword}
-          onChangeText={handleConfirmPasswordChange}
-          placeholder={
-            t("auth.confirmPasswordPlaceholder")
-          }
-          secureTextEntry
-          showPasswordToggle
-          autoCapitalize="none"
-          disabled={loading}
-          state={fieldErrors.confirmPassword ? "error" : "default"}
-          helperText={fieldErrors.confirmPassword || undefined}
-          returnKeyType="done"
-          onSubmitEditing={() => { void handleSignUp(); }}
-          textContentType="newPassword"
-        />
-        {confirmPassword.length > 0 && (
-          <PasswordMatchIndicator isMatch={passwordsMatch} />
-        )}
-      </View>
+      <AtomicInput
+        ref={confirmPasswordRef}
+        label={t("auth.confirmPassword")}
+        value={confirmPassword}
+        onChangeText={handleConfirmPasswordChange}
+        placeholder={
+          t("auth.confirmPasswordPlaceholder")
+        }
+        secureTextEntry
+        showPasswordToggle
+        autoCapitalize="none"
+        disabled={loading}
+        state={fieldErrors.confirmPassword ? "error" : "default"}
+        helperText={fieldErrors.confirmPassword || undefined}
+        returnKeyType="done"
+        onSubmitEditing={() => { void handleSignUp(); }}
+        textContentType="newPassword"
+        style={styles.input}
+      />
+      {confirmPassword.length > 0 && (
+        <PasswordMatchIndicator isMatch={passwordsMatch} />
+      )}
 
       <AuthErrorDisplay error={displayError} />
 
-      <View style={styles.buttonContainer}>
-        <AtomicButton
-          variant="primary"
-          onPress={() => { void handleSignUp(); }}
-          disabled={
-            loading ||
-            !email.trim() ||
-            !password.trim() ||
-            !confirmPassword.trim()
-          }
-          fullWidth
-          style={styles.signUpButton}
-        >
-          {t("auth.signUp")}
-        </AtomicButton>
-      </View>
+      <AtomicButton
+        variant="primary"
+        onPress={() => { void handleSignUp(); }}
+        disabled={
+          loading ||
+          !email.trim() ||
+          !password.trim() ||
+          !confirmPassword.trim()
+        }
+        fullWidth
+        style={styles.signUpButton}
+      >
+        {t("auth.signUp")}
+      </AtomicButton>
 
       <AuthLink
         text={t("auth.alreadyHaveAccount")}
@@ -175,15 +169,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 };
 
 const styles = StyleSheet.create({
-  inputContainer: {
+  input: {
     marginBottom: 20,
   },
-  buttonContainer: {
-    marginBottom: 16,
-    marginTop: 8,
-  },
   signUpButton: {
     minHeight: 52,
+    marginBottom: 16,
+    marginTop: 8,
   },
 });
 

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import {
   View,
-  TouchableOpacity,
   StyleSheet,
   Platform,
 } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, Divider, AtomicButton } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
@@ -45,61 +44,35 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
 
   return (
     <View style={styles.container}>
-      <View style={styles.dividerContainer}>
-        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
-        <AtomicText type="bodySmall" color="secondary" style={styles.dividerText}>
-          {t("auth.orContinueWith")}
-        </AtomicText>
-        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
-      </View>
+      <Divider text={t("auth.orContinueWith")} spacing="large" />
 
       <View style={styles.buttonsContainer}>
         {showGoogle && (
-          <TouchableOpacity
-            style={[
-              styles.socialButton,
-              { borderColor: tokens.colors.border },
-              disabled && styles.disabledButton,
-            ]}
-            onPress={onGooglePress}
-            disabled={disabled || googleLoading}
-            activeOpacity={0.7}
+          <AtomicButton
+            variant="outline"
+            onPress={onGooglePress || (() => {})}
+            loading={googleLoading}
+            disabled={disabled}
+            icon="logo-google"
+            fullWidth
+            style={styles.socialButton}
           >
-            {googleLoading ? (
-              <AtomicSpinner size="sm" color={tokens.colors.textPrimary} />
-            ) : (
-              <>
-                <AtomicIcon name="logo-google" size="sm" />
-                <AtomicText style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
-                  {t("auth.google")}
-                </AtomicText>
-              </>
-            )}
-          </TouchableOpacity>
+            {t("auth.google")}
+          </AtomicButton>
         )}
 
         {showApple && (
-          <TouchableOpacity
-            style={[
-              styles.socialButton,
-              { borderColor: tokens.colors.border },
-              disabled && styles.disabledButton,
-            ]}
-            onPress={onApplePress}
-            disabled={disabled || appleLoading}
-            activeOpacity={0.7}
+          <AtomicButton
+            variant="outline"
+            onPress={onApplePress || (() => {})}
+            loading={appleLoading}
+            disabled={disabled}
+            icon="logo-apple"
+            fullWidth
+            style={styles.socialButton}
           >
-            {appleLoading ? (
-              <AtomicSpinner size="sm" color={tokens.colors.textPrimary} />
-            ) : (
-              <>
-                <AtomicIcon name="logo-apple" size="sm" color="onSurface" />
-                <AtomicText style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
-                  {t("auth.apple")}
-                </AtomicText>
-              </>
-            )}
-          </TouchableOpacity>
+            {t("auth.apple")}
+          </AtomicButton>
         )}
       </View>
     </View>
@@ -110,38 +83,13 @@ const styles = StyleSheet.create({
   container: {
     marginTop: 24,
   },
-  dividerContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 20,
-  },
-  divider: {
-    flex: 1,
-    height: 1,
-  },
-  dividerText: {
-    marginHorizontal: 16,
-  },
   buttonsContainer: {
-    flexDirection: "row",
+    flexDirection: 'row',
+    marginTop: 8,
     gap: 12,
   },
   socialButton: {
     flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 14,
-    borderRadius: 12,
-    borderWidth: 1,
-    gap: 8,
-  },
-  disabledButton: {
-    opacity: 0.5,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: "600",
   },
 });
 

package/src/presentation/screens/LoginScreen.tsx

@@ -4,29 +4,34 @@
  */
 
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
+import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { AuthStackParamList } from "../navigation/AuthNavigator";
-import { AuthContainer } from "../components/AuthContainer";
 import { AuthHeader } from "../components/AuthHeader";
-import { AuthFormCard } from "../components/AuthFormCard";
 import { LoginForm } from "../components/LoginForm";
 
 export const LoginScreen: React.FC = () => {
   const { t } = useLocalization();
   const navigation = useAppNavigation<AuthStackParamList>();
+  const tokens = useAppDesignTokens();
 
   const handleNavigateToRegister = () => {
     navigation.navigate("Register");
   };
 
   return (
-    <AuthContainer>
+    <ScreenLayout
+      scrollable
+      keyboardAvoiding
+      maxWidth={440}
+      contentContainerStyle={{ justifyContent: "center" }}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
       <AuthHeader title={t("auth.title")} />
-      <AuthFormCard>
+      <AtomicCard variant="elevated" padding="lg">
         <LoginForm onNavigateToRegister={handleNavigateToRegister} />
-      </AuthFormCard>
-    </AuthContainer>
+      </AtomicCard>
+    </ScreenLayout>
   );
 };
 

package/src/presentation/screens/RegisterScreen.tsx

@@ -4,12 +4,10 @@
  */
 
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
+import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { AuthStackParamList } from "../navigation/AuthNavigator";
-import { AuthContainer } from "../components/AuthContainer";
 import { AuthHeader } from "../components/AuthHeader";
-import { AuthFormCard } from "../components/AuthFormCard";
 import { RegisterForm } from "../components/RegisterForm";
 
 export interface RegisterScreenProps {
@@ -27,15 +25,22 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
 }) => {
   const { t } = useLocalization();
   const navigation = useAppNavigation<AuthStackParamList>();
+  const tokens = useAppDesignTokens();
 
   const handleNavigateToLogin = () => {
     navigation.navigate("Login");
   };
 
   return (
-    <AuthContainer>
+    <ScreenLayout
+        scrollable
+        keyboardAvoiding
+        maxWidth={440}
+        contentContainerStyle={{ justifyContent: "center" }}
+        backgroundColor={tokens.colors.backgroundPrimary}
+    >
       <AuthHeader title={t("auth.createAccount")} />
-      <AuthFormCard>
+      <AtomicCard variant="elevated" padding="lg">
         <RegisterForm
           onNavigateToLogin={handleNavigateToLogin}
           termsUrl={termsUrl}
@@ -43,8 +48,8 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
           onTermsPress={onTermsPress}
           onPrivacyPress={onPrivacyPress}
         />
-      </AuthFormCard>
-    </AuthContainer>
+      </AtomicCard>
+    </ScreenLayout>
   );
 };
 

package/src/presentation/components/AuthBackground.tsx

@@ -1,21 +0,0 @@
-/**
- * Auth Background Component
- * Standard background for auth screens
- */
-
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-export const AuthBackground: React.FC = () => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View
-      style={[
-        StyleSheet.absoluteFill,
-        { backgroundColor: tokens.colors.backgroundPrimary }
-      ]}
-    />
-  );
-};

package/src/presentation/components/AuthContainer.tsx

@@ -1,80 +0,0 @@
-/**
- * Auth Container Component
- * Main container for auth screens with background and scroll
- */
-
-import React, { useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  KeyboardAvoidingView,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useResponsive } from "@umituz/react-native-design-system";
-import { AuthBackground } from "./AuthBackground";
-
-/** Layout constants for auth screens */
-const AUTH_LAYOUT = {
-  VERTICAL_PADDING: 40,
-  HORIZONTAL_PADDING: 20,
-  MAX_CONTENT_WIDTH: 440,
-} as const;
-
-interface AuthContainerProps {
-  children: React.ReactNode;
-}
-
-export const AuthContainer: React.FC<AuthContainerProps> = ({ children }) => {
-  const insets = useSafeAreaInsets();
-  const { spacingMultiplier } = useResponsive();
-
-  const dynamicStyles = useMemo(() => ({
-    paddingTop: insets.top + (AUTH_LAYOUT.VERTICAL_PADDING * spacingMultiplier),
-    paddingBottom: insets.bottom + (AUTH_LAYOUT.VERTICAL_PADDING * spacingMultiplier),
-  }), [insets.top, insets.bottom, spacingMultiplier]);
-
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior="padding"
-    >
-      <AuthBackground />
-      <ScrollView
-        contentContainerStyle={[styles.scrollContent, dynamicStyles]}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>{children}</View>
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: AUTH_LAYOUT.HORIZONTAL_PADDING,
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center",
-    maxWidth: AUTH_LAYOUT.MAX_CONTENT_WIDTH,
-    alignSelf: "center",
-    width: "100%",
-  },
-});
-
-
-
-
-
-
-
-
-
-
-

package/src/presentation/components/AuthFormCard.tsx

@@ -1,51 +0,0 @@
-/**
- * Auth Form Card Component
- * Reusable card container for auth forms
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-interface AuthFormCardProps {
-  children: React.ReactNode;
-}
-
-export const AuthFormCard: React.FC<AuthFormCardProps> = ({ children }) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View
-      style={[
-        styles.formCard,
-        {
-          backgroundColor: tokens.colors.surface,
-          borderRadius: tokens.borders.radius.xl,
-          padding: tokens.spacing.lg,
-        },
-      ]}
-    >
-      <View style={styles.form}>{children}</View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  formCard: {
-    width: "100%",
-  },
-  form: {
-    width: "100%",
-  },
-});
-
-
-
-
-
-
-
-
-
-
-

package/src/presentation/components/icons/AppleIconSvg.tsx

@@ -1,24 +0,0 @@
-/**
- * Apple Icon SVG
- * Dark mode compatible Apple logo
- */
-
-import React from "react";
-import Svg, { Path } from "react-native-svg";
-
-export interface AppleIconSvgProps {
-    size?: number;
-    color: string;
-}
-
-export const AppleIconSvg: React.FC<AppleIconSvgProps> = ({
-    size = 20,
-    color,
-}) => (
-    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.02-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
-            fill={color}
-        />
-    </Svg>
-);

package/src/presentation/components/icons/GoogleIconSvg.tsx

@@ -1,32 +0,0 @@
-/**
- * Google Icon SVG
- * Standard Google logo with color
- */
-
-import React from "react";
-import Svg, { Path } from "react-native-svg";
-
-export interface GoogleIconSvgProps {
-    size?: number;
-}
-
-export const GoogleIconSvg: React.FC<GoogleIconSvgProps> = ({ size = 20 }) => (
-    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-        <Path
-            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-            fill="#4285F4"
-        />
-        <Path
-            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-            fill="#34A853"
-        />
-        <Path
-            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-            fill="#FBBC05"
-        />
-        <Path
-            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-            fill="#EA4335"
-        />
-    </Svg>
-);

package/src/presentation/components/icons/index.ts

@@ -1,6 +0,0 @@
-/**
- * Social Login Icons
- */
-
-export { AppleIconSvg } from "./AppleIconSvg";
-export { GoogleIconSvg } from "./GoogleIconSvg";