@umituz/react-native-auth 2.5.1 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "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",

package/src/presentation/components/AuthBottomSheet.tsx

@@ -1,43 +1,28 @@
 /**
  * AuthBottomSheet Component
  * Bottom sheet modal for authentication (Login/Register)
- *
- * Usage:
- * ```tsx
- * import { AuthBottomSheet } from '@umituz/react-native-auth';
- *
- * // In your app root (inside BottomSheetModalProvider)
- * <AuthBottomSheet
- *   termsUrl="https://example.com/terms"
- *   privacyUrl="https://example.com/privacy"
- * />
- * ```
  */
 
 import React, { useEffect, useCallback, useRef } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import {
   BottomSheetModal,
-  BottomSheetView,
   BottomSheetBackdrop,
   BottomSheetScrollView,
   type BottomSheetBackdropProps,
 } from "@gorhom/bottom-sheet";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
+import { X } from "lucide-react-native";
 import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
 import { LoginForm } from "./LoginForm";
 import { RegisterForm } from "./RegisterForm";
 
 export interface AuthBottomSheetProps {
-  /** Terms of Service URL */
   termsUrl?: string;
-  /** Privacy Policy URL */
   privacyUrl?: string;
-  /** Callback when Terms of Service is pressed */
   onTermsPress?: () => void;
-  /** Callback when Privacy Policy is pressed */
   onPrivacyPress?: () => void;
 }
 
@@ -55,7 +40,6 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     useAuthModalStore();
   const { isAuthenticated, isGuest } = useAuth();
 
-  // Present/dismiss modal based on visibility state
   useEffect(() => {
     if (isVisible) {
       modalRef.current?.present();
@@ -64,7 +48,6 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     }
   }, [isVisible]);
 
-  // Handle successful authentication
   useEffect(() => {
     if (isAuthenticated && !isGuest && isVisible) {
       hideAuthModal();
@@ -77,6 +60,11 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     clearPendingCallback();
   }, [hideAuthModal, clearPendingCallback]);
 
+  const handleClose = useCallback(() => {
+    modalRef.current?.dismiss();
+    handleDismiss();
+  }, [handleDismiss]);
+
   const handleNavigateToRegister = useCallback(() => {
     setMode("register");
   }, [setMode]);
@@ -112,6 +100,14 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       >
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={handleClose}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <X size={24} color={tokens.colors.textSecondary} />
+        </TouchableOpacity>
+
         <View style={styles.header}>
           <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
             {mode === "login" ? t("auth.signIn") : t("auth.createAccount")}
@@ -153,10 +149,18 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingBottom: 40,
   },
+  closeButton: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    padding: 8,
+    zIndex: 10,
+  },
   header: {
     alignItems: "center",
     marginBottom: 24,
     marginTop: 8,
+    paddingTop: 16,
   },
   title: {
     fontSize: 28,

package/src/presentation/components/LoginForm.tsx

@@ -9,16 +9,13 @@ import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system-at
 import { useLocalization } from "@umituz/react-native-localization";
 import { useLoginForm } from "../hooks/useLoginForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
-import { AuthDivider } from "./AuthDivider";
 import { AuthLink } from "./AuthLink";
 
 interface LoginFormProps {
   onNavigateToRegister: () => void;
 }
 
-export const LoginForm: React.FC<LoginFormProps> = ({
-  onNavigateToRegister,
-}) => {
+export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) => {
   const { t } = useLocalization();
   const {
     email,
@@ -29,7 +26,6 @@ export const LoginForm: React.FC<LoginFormProps> = ({
     handleEmailChange,
     handlePasswordChange,
     handleSignIn,
-    handleContinueAsGuest,
     displayError,
   } = useLoginForm();
 
@@ -77,21 +73,6 @@ export const LoginForm: React.FC<LoginFormProps> = ({
         </AtomicButton>
       </View>
 
-      <AuthDivider />
-
-      <View style={styles.buttonContainer}>
-        <AtomicButton
-          variant="outline"
-          onPress={handleContinueAsGuest}
-          disabled={loading}
-          fullWidth
-          style={styles.guestButton}
-          testID="continue-as-guest-button"
-        >
-          {t("auth.continueAsGuest")}
-        </AtomicButton>
-      </View>
-
       <AuthLink
         text={t("auth.dontHaveAccount")}
         linkText={t("auth.createAccount")}
@@ -112,8 +93,4 @@ const styles = StyleSheet.create({
   signInButton: {
     minHeight: 52,
   },
-  guestButton: {
-    minHeight: 52,
-  },
 });
-