@oxyhq/services 5.4.3 → 5.4.5

package/lib/commonjs/ui/screens/SignUpScreen.js

@@ -6,143 +6,368 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext.js");
-var _index = require("../styles/index.js");
+var _OxyContext = require("../context/OxyContext");
+var _styles = require("../styles");
 var _vectorIcons = require("@expo/vector-icons");
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _sonner = require("../../lib/sonner.js");
+var _sonner = require("../../lib/sonner");
+var _HighFive = _interopRequireDefault(require("../../assets/illustrations/HighFive"));
+var _GroupedPillButtons = _interopRequireDefault(require("../components/internal/GroupedPillButtons"));
+var _TextField = _interopRequireDefault(require("../components/internal/TextField"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const SignUpScreen = ({
-  navigate,
-  goBack,
-  theme
-}) => {
-  // Form data states
-  const [username, setUsername] = (0, _react.useState)('');
-  const [email, setEmail] = (0, _react.useState)('');
-  const [password, setPassword] = (0, _react.useState)('');
-  const [confirmPassword, setConfirmPassword] = (0, _react.useState)('');
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const [showConfirmPassword, setShowConfirmPassword] = (0, _react.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+// Types for better type safety
 
-  // Multi-step form states
-  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
-  const [isInputFocused, setIsInputFocused] = (0, _react.useState)(false);
-  const [isValidating, setIsValidating] = (0, _react.useState)(false);
-  const [validationStatus, setValidationStatus] = (0, _react.useState)('idle');
+// Constants
+const USERNAME_MIN_LENGTH = 3;
+const PASSWORD_MIN_LENGTH = 8;
+const VALIDATION_DEBOUNCE_MS = 800;
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
 
-  // Cache for validation results
-  const validationCache = (0, _react.useRef)(new Map());
-  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(400)).current;
-  const [containerHeight, setContainerHeight] = (0, _react.useState)(400);
-  const {
-    signUp,
-    isLoading,
-    user,
-    isAuthenticated,
-    oxyServices
-  } = (0, _OxyContext.useOxy)();
-  const colors = (0, _index.useThemeColors)(theme);
-  const commonStyles = (0, _index.createCommonStyles)(theme);
-
-  // Memoized styles to prevent rerenders
-  const styles = (0, _react.useMemo)(() => createStyles(colors, theme), [colors, theme]);
+// Email validation regex
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-  // Input focus animations
-  const handleInputFocus = (0, _react.useCallback)(() => {
-    setIsInputFocused(true);
-  }, []);
-  const handleInputBlur = (0, _react.useCallback)(() => {
-    setIsInputFocused(false);
-  }, []);
-
-  // Memoized input change handlers
-  const handleUsernameChange = (0, _react.useCallback)(text => {
-    setUsername(text);
-    if (validationStatus === 'invalid') {
-      setErrorMessage('');
-      setValidationStatus('idle');
-    }
-  }, [validationStatus]);
-  const handleEmailChange = (0, _react.useCallback)(text => {
-    setEmail(text);
-    setErrorMessage('');
-  }, []);
-  const handlePasswordChange = (0, _react.useCallback)(text => {
-    setPassword(text);
-    setErrorMessage('');
-  }, []);
-  const handleConfirmPasswordChange = (0, _react.useCallback)(text => {
-    setConfirmPassword(text);
-    setErrorMessage('');
-  }, []);
+// Styles factory function
+const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 4,
+    paddingBottom: 20
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  modernHeader: {
+    alignItems: 'flex-start',
+    width: '100%',
+    marginBottom: 24
+  },
+  modernTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  welcomeImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20
+  },
+  welcomeTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  welcomeText: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  stepTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  inputContainer: {
+    width: '100%',
+    marginBottom: 24
+  },
+  premiumInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground
+  },
+  inputIcon: {
+    marginRight: 12
+  },
+  inputContent: {
+    flex: 1
+  },
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
+  modernInput: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%'
+  },
+  validationIndicator: {
+    marginLeft: 8
+  },
+  validationCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationIconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  validationTextContainer: {
+    flex: 1
+  },
+  validationTitle: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 2
+  },
+  validationSubtitle: {
+    fontSize: 11,
+    opacity: 0.8
+  },
+  passwordToggle: {
+    padding: 4
+  },
+  passwordHint: {
+    fontSize: 12,
+    marginTop: 4
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    marginVertical: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+    gap: 8,
+    width: '100%'
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5
+  },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16
+  },
+  footerText: {
+    fontSize: 15
+  },
+  linkText: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    textDecorationLine: 'underline'
+  },
+  userInfoContainer: {
+    padding: 20,
+    marginVertical: 20,
+    borderRadius: 24,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.04,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 4,
+    elevation: 1
+  },
+  userInfoText: {
+    fontSize: 16,
+    marginBottom: 8,
+    textAlign: 'center'
+  },
+  actionButtonsContainer: {
+    marginTop: 24
+  },
+  navigationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
+  },
+  navButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 6,
+    minWidth: 70,
+    borderWidth: 1,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  backButton: {
+    backgroundColor: 'transparent',
+    borderTopLeftRadius: 35,
+    borderBottomLeftRadius: 35,
+    borderTopRightRadius: 12,
+    borderBottomRightRadius: 12
+  },
+  nextButton: {
+    backgroundColor: 'transparent',
+    borderTopRightRadius: 35,
+    borderBottomRightRadius: 35,
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12
+  },
+  navButtonText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 20,
+    marginTop: 8
+  },
+  progressDot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    marginHorizontal: 6,
+    borderWidth: 2,
+    borderColor: '#fff',
+    shadowColor: colors.primary,
+    shadowOpacity: 0.08,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 2,
+    elevation: 1
+  },
+  summaryContainer: {
+    padding: 0,
+    marginBottom: 24,
+    width: '100%'
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    marginBottom: 10
+  },
+  summaryLabel: {
+    fontSize: 15,
+    width: 90
+  },
+  summaryValue: {
+    fontSize: 15,
+    fontWeight: '600',
+    flex: 1
+  }
+});
 
-  // Username availability validation using core services
-  const validateUsername = (0, _react.useCallback)(async usernameToValidate => {
-    if (!usernameToValidate || usernameToValidate.length < 3) {
-      setValidationStatus('invalid');
+// Custom hooks for better separation of concerns
+const useFormValidation = oxyServices => {
+  const [validationState, setValidationState] = (0, _react.useState)({
+    status: 'idle',
+    message: ''
+  });
+  const validationCache = (0, _react.useRef)(new Map());
+  const validateUsername = (0, _react.useCallback)(async username => {
+    if (!username || username.length < USERNAME_MIN_LENGTH) {
+      setValidationState({
+        status: 'invalid',
+        message: ''
+      });
       return false;
     }
 
-    // Check cache first (cache valid for 5 minutes)
-    const cached = validationCache.current.get(usernameToValidate);
+    // Check cache first
+    const cached = validationCache.current.get(username);
     const now = Date.now();
-    if (cached && now - cached.timestamp < 5 * 60 * 1000) {
-      setValidationStatus(cached.available ? 'valid' : 'invalid');
-      setErrorMessage(cached.available ? '' : 'Username is already taken');
-      return cached.available;
+    if (cached && now - cached.timestamp < CACHE_DURATION_MS) {
+      const isValid = cached.available;
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : 'Username is already taken'
+      });
+      return isValid;
     }
-    setIsValidating(true);
-    setValidationStatus('validating');
+    setValidationState({
+      status: 'validating',
+      message: ''
+    });
     try {
-      const result = await oxyServices.checkUsernameAvailability(usernameToValidate);
-      if (result.available) {
-        setValidationStatus('valid');
-        setErrorMessage('');
-
-        // Cache the result
-        validationCache.current.set(usernameToValidate, {
-          available: true,
-          timestamp: now
-        });
-        return true;
-      } else {
-        setValidationStatus('invalid');
-        setErrorMessage(result.message || 'Username is already taken');
+      const result = await oxyServices.checkUsernameAvailability(username);
+      const isValid = result.available;
 
-        // Cache the result
-        validationCache.current.set(usernameToValidate, {
-          available: false,
-          timestamp: now
-        });
-        return false;
-      }
+      // Cache the result
+      validationCache.current.set(username, {
+        available: isValid,
+        timestamp: now
+      });
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : result.message || 'Username is already taken'
+      });
+      return isValid;
     } catch (error) {
       console.error('Username validation error:', error);
-      setValidationStatus('invalid');
-      setErrorMessage('Unable to validate username. Please try again.');
+      setValidationState({
+        status: 'invalid',
+        message: 'Unable to validate username. Please try again.'
+      });
       return false;
-    } finally {
-      setIsValidating(false);
     }
   }, [oxyServices]);
-
-  // Debounced username validation
-  (0, _react.useEffect)(() => {
-    if (!username || username.length < 3) {
-      setValidationStatus('idle');
-      setErrorMessage('');
-      return;
-    }
-    const timeoutId = setTimeout(() => {
-      validateUsername(username);
-    }, 800);
-    return () => clearTimeout(timeoutId);
-  }, [username, validateUsername]);
+  const validateEmail = (0, _react.useCallback)(email => {
+    return EMAIL_REGEX.test(email);
+  }, []);
+  const validatePassword = (0, _react.useCallback)(password => {
+    return password.length >= PASSWORD_MIN_LENGTH;
+  }, []);
+  const validatePasswordsMatch = (0, _react.useCallback)((password, confirmPassword) => {
+    return password === confirmPassword;
+  }, []);
 
   // Cleanup cache on unmount
   (0, _react.useEffect)(() => {
@@ -150,6 +375,261 @@ const SignUpScreen = ({
       validationCache.current.clear();
     };
   }, []);
+  return {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  };
+};
+const useFormData = () => {
+  const [formData, setFormData] = (0, _react.useState)({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [passwordVisibility, setPasswordVisibility] = (0, _react.useState)({
+    password: false,
+    confirmPassword: false
+  });
+  const updateField = (0, _react.useCallback)((field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  }, []);
+  const togglePasswordVisibility = (0, _react.useCallback)(field => {
+    setPasswordVisibility(prev => ({
+      ...prev,
+      [field]: !prev[field]
+    }));
+  }, []);
+  const resetForm = (0, _react.useCallback)(() => {
+    setFormData({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    });
+    setPasswordVisibility({
+      password: false,
+      confirmPassword: false
+    });
+  }, []);
+  return {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  };
+};
+
+// Reusable components
+const ValidationIndicator = /*#__PURE__*/_react.default.memo(({
+  status,
+  colors,
+  styles
+}) => {
+  if (status === 'validating') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      size: "small",
+      color: colors.primary,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'valid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "checkmark-circle",
+      size: 22,
+      color: colors.success,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'invalid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "close-circle",
+      size: 22,
+      color: colors.error,
+      style: styles.validationIndicator
+    });
+  }
+  return null;
+});
+const ValidationMessage = /*#__PURE__*/_react.default.memo(({
+  validationState,
+  colors,
+  styles
+}) => {
+  if (validationState.status === 'idle' || !validationState.message) return null;
+  const isSuccess = validationState.status === 'valid';
+  const backgroundColor = isSuccess ? colors.success + '10' : colors.error + '10';
+  const borderColor = isSuccess ? colors.success + '30' : colors.error + '30';
+  const iconColor = isSuccess ? colors.success : colors.error;
+  const iconName = isSuccess ? 'checkmark-circle' : 'alert-circle';
+  const title = isSuccess ? 'Username Available' : 'Username Taken';
+  const subtitle = isSuccess ? 'Good choice! This username is available' : validationState.message;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.validationCard, {
+      backgroundColor,
+      borderColor
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.validationIconContainer, {
+        backgroundColor: iconColor + '20'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: iconName,
+        size: 16,
+        color: iconColor
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.validationTextContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.validationTitle, {
+          color: iconColor
+        }],
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.validationSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: subtitle
+      })]
+    })]
+  });
+});
+const FormInput = /*#__PURE__*/_react.default.memo(({
+  icon,
+  label,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  keyboardType = 'default',
+  autoCapitalize = 'sentences',
+  autoCorrect = true,
+  testID,
+  colors,
+  styles,
+  borderColor,
+  rightComponent
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.inputContainer,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.premiumInputWrapper, {
+      borderColor: borderColor || colors.border,
+      backgroundColor: colors.inputBackground,
+      shadowColor: colors.primary,
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 12,
+      elevation: 3
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: icon,
+      size: 22,
+      color: colors.secondaryText,
+      style: styles.inputIcon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inputContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernLabel, {
+          color: colors.secondaryText
+        }],
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: [styles.modernInput, {
+          color: colors.text
+        }],
+        value: value,
+        onChangeText: onChangeText,
+        secureTextEntry: secureTextEntry,
+        keyboardType: keyboardType,
+        autoCapitalize: autoCapitalize,
+        autoCorrect: autoCorrect,
+        testID: testID,
+        placeholderTextColor: "transparent"
+      })]
+    }), rightComponent]
+  })
+}));
+const ProgressIndicator = /*#__PURE__*/_react.default.memo(({
+  currentStep,
+  totalSteps,
+  colors,
+  styles
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.progressContainer,
+  children: Array.from({
+    length: totalSteps
+  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.progressDot, currentStep === index ? {
+      backgroundColor: colors.primary,
+      width: 24
+    } : {
+      backgroundColor: colors.border
+    }]
+  }, index))
+}));
+
+// Main component
+const SignUpScreen = ({
+  navigate,
+  goBack,
+  onAuthenticated,
+  theme
+}) => {
+  const {
+    signUp,
+    isLoading,
+    user,
+    isAuthenticated,
+    oxyServices
+  } = (0, _OxyContext.useOxy)();
+  const colors = (0, _styles.useThemeColors)(theme);
+
+  // Form state
+  const {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  } = useFormData();
+  const {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  } = useFormValidation(oxyServices);
+
+  // UI state
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+
+  // Animation refs
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+
+  // Memoized styles
+  const styles = (0, _react.useMemo)(() => createStyles(colors, theme), [colors, theme]);
+
+  // Debounced username validation
+  (0, _react.useEffect)(() => {
+    if (!formData.username || formData.username.length < USERNAME_MIN_LENGTH) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      validateUsername(formData.username);
+    }, VALIDATION_DEBOUNCE_MS);
+    return () => clearTimeout(timeoutId);
+  }, [formData.username, validateUsername]);
 
   // Animation functions
   const animateTransition = (0, _react.useCallback)(nextStep => {
@@ -181,116 +661,83 @@ const SignUpScreen = ({
       animateTransition(currentStep - 1);
     }
   }, [currentStep, animateTransition]);
-  const validateEmail = (0, _react.useCallback)(email => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  }, []);
-  const handleSignUp = (0, _react.useCallback)(async () => {
-    if (!username || !email || !password || !confirmPassword) {
-      _sonner.toast.error('Please fill in all fields');
-      return;
-    }
-    if (!validateEmail(email)) {
-      _sonner.toast.error('Please enter a valid email address');
-      return;
-    }
-    if (validationStatus !== 'valid') {
-      _sonner.toast.error('Please enter a valid username');
+
+  // Form validation helpers
+  const isIdentityStepValid = (0, _react.useCallback)(() => {
+    return formData.username && formData.email && validateEmail(formData.email) && validationState.status === 'valid';
+  }, [formData.username, formData.email, validateEmail, validationState.status]);
+  const isSecurityStepValid = (0, _react.useCallback)(() => {
+    return formData.password && validatePassword(formData.password) && validatePasswordsMatch(formData.password, formData.confirmPassword);
+  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
+
+  // Custom next handlers for validation
+  const handleIdentityNext = (0, _react.useCallback)(() => {
+    if (!isIdentityStepValid()) {
+      _sonner.toast.error('Please enter a valid username and email.');
       return;
     }
-    if (password !== confirmPassword) {
-      _sonner.toast.error('Passwords do not match');
+    nextStep();
+  }, [isIdentityStepValid, nextStep]);
+  const handleSecurityNext = (0, _react.useCallback)(() => {
+    if (!isSecurityStepValid()) {
+      _sonner.toast.error('Please enter a valid password and confirm it.');
       return;
     }
-    if (password.length < 8) {
-      _sonner.toast.error('Password must be at least 8 characters long');
+    nextStep();
+  }, [isSecurityStepValid, nextStep]);
+
+  // Sign up handler
+  const handleSignUp = (0, _react.useCallback)(async () => {
+    if (!isIdentityStepValid() || !isSecurityStepValid()) {
+      _sonner.toast.error('Please fill in all fields correctly');
       return;
     }
     try {
       setErrorMessage('');
-      await signUp(username, email, password);
+      const user = await signUp(formData.username, formData.email, formData.password);
       _sonner.toast.success('Account created successfully! Welcome to Oxy!');
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
+      resetForm();
     } catch (error) {
       _sonner.toast.error(error.message || 'Sign up failed');
     }
-  }, [username, email, password, confirmPassword, validationStatus, validateEmail, signUp]);
+  }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
 
   // Step components
-  const renderWelcomeStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  const renderWelcomeStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.welcomeImageContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-        width: 220,
-        height: 120,
-        viewBox: "0 0 220 120",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-          d: "M30 100 Q60 20 110 60 Q160 100 190 40",
-          stroke: colors.primary,
-          strokeWidth: "8",
-          fill: "none"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "60",
-          cy: "60",
-          r: "18",
-          fill: colors.primary,
-          opacity: "0.18"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "110",
-          cy: "60",
-          r: "24",
-          fill: colors.primary,
-          opacity: "0.25"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "170",
-          cy: "50",
-          r: "14",
-          fill: colors.primary,
-          opacity: "0.15"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "110",
-          cy: "60",
-          r: "32",
-          fill: "#fff",
-          opacity: "0.7"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "100",
-          cy: "55",
-          r: "4",
-          fill: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-          cx: "120",
-          cy: "55",
-          r: "4",
-          fill: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-          d: "M104 68 Q110 75 116 68",
-          stroke: colors.primary,
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.welcomeText, {
-        color: colors.text
-      }],
-      children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: colors.primary
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
+      width: 100,
+      height: 100
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernTitle, {
+          color: colors.text
+        }],
+        children: "Welcome to Oxy"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Get Started',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        testID: 'welcome-next-button'
       }],
-      onPress: nextStep,
-      testID: "welcome-next-button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.buttonText,
-        children: "Get Started"
-      })
+      colors: colors
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
@@ -309,257 +756,148 @@ const SignUpScreen = ({
       })]
     })]
   }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
-  const renderIdentityStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  const renderIdentityStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Who are you?"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Username"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Choose a username",
-          placeholderTextColor: colors.placeholder,
-          value: username,
-          onChangeText: handleUsernameChange,
-          autoCapitalize: "none",
-          testID: "username-input"
-        }), validationStatus === 'validating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: colors.primary,
-          style: styles.validationIndicator
-        }), validationStatus === 'valid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "checkmark-circle",
-          size: 20,
-          color: colors.success,
-          style: styles.validationIndicator
-        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "close-circle",
-          size: 20,
-          color: colors.error,
-          style: styles.validationIndicator
-        })]
-      }), validationStatus === 'valid' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.validationSuccessCard, {
-          backgroundColor: colors.success + '15'
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "checkmark-circle",
-          size: 16,
-          color: colors.success
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.validationText, {
-            color: colors.success
-          }],
-          children: "Username is available"
-        })]
-      }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.validationErrorCard, {
-          backgroundColor: colors.error + '15'
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "alert-circle",
-          size: 16,
-          color: colors.error
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.validationText, {
-            color: colors.error
-          }],
-          children: errorMessage || 'Username is already taken'
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Email"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [styles.input, {
-          backgroundColor: colors.inputBackground,
-          borderColor: colors.border,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
           color: colors.text
         }],
-        placeholder: "Enter your email",
-        placeholderTextColor: colors.placeholder,
-        value: email,
-        onChangeText: handleEmailChange,
-        autoCapitalize: "none",
-        keyboardType: "email-address",
-        testID: "email-input"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+        children: "Who are you?"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "person-outline",
+      label: "Username",
+      value: formData.username,
+      onChangeText: text => {
+        updateField('username', text);
+        setErrorMessage('');
+      },
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "username-input",
+      colors: colors,
+      variant: "filled",
+      error: validationState.status === 'invalid' ? validationState.message : undefined,
+      loading: validationState.status === 'validating',
+      success: validationState.status === 'valid'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationMessage, {
+      validationState: validationState,
+      colors: colors,
+      styles: styles
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "mail-outline",
+      label: "Email",
+      value: formData.email,
+      onChangeText: text => {
+        updateField('email', text);
+      },
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "email-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton, {
-          backgroundColor: colors.primary
-        }],
-        onPress: nextStep,
-        disabled: !username || !email || !validateEmail(email) || validationStatus !== 'valid',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: '#FFFFFF'
-          }],
-          children: "Next"
-        })
-      })]
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleIdentityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, username, email, validationStatus, errorMessage, handleUsernameChange, handleEmailChange, validateEmail, prevStep, nextStep, styles]);
-  const renderSecurityStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, colors, formData, validationState, updateField, setErrorMessage, prevStep, handleIdentityNext, styles]);
+  const renderSecurityStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Secure your account"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.label, {
-          color: colors.text
-        }],
-        children: "Password"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Create a password",
-          placeholderTextColor: colors.placeholder,
-          value: password,
-          onChangeText: handlePasswordChange,
-          secureTextEntry: !showPassword,
-          testID: "password-input"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowPassword(!showPassword),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: showPassword ? 'eye-off' : 'eye',
-            size: 20,
-            color: colors.placeholder
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.passwordHint, {
-          color: colors.secondaryText
-        }],
-        children: "Password must be at least 8 characters long"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.label, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
           color: colors.text
         }],
-        children: "Confirm Password"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          position: 'relative'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          style: [styles.input, {
-            backgroundColor: colors.inputBackground,
-            borderColor: colors.border,
-            color: colors.text
-          }],
-          placeholder: "Confirm your password",
-          placeholderTextColor: colors.placeholder,
-          value: confirmPassword,
-          onChangeText: handleConfirmPasswordChange,
-          secureTextEntry: !showConfirmPassword,
-          testID: "confirm-password-input"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowConfirmPassword(!showConfirmPassword),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: showConfirmPassword ? 'eye-off' : 'eye',
-            size: 20,
-            color: colors.placeholder
-          })
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+        children: "Secure your account"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "lock-closed-outline",
+      label: "Password",
+      value: formData.password,
+      onChangeText: text => {
+        updateField('password', text);
+      },
+      secureTextEntry: !passwordVisibility.password,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.password && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.passwordHint, {
+        color: colors.secondaryText
+      }],
+      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "lock-closed-outline",
+      label: "Confirm Password",
+      value: formData.confirmPassword,
+      onChangeText: text => {
+        updateField('confirmPassword', text);
+      },
+      secureTextEntry: !passwordVisibility.confirmPassword,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "confirm-password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.confirmPassword && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton, {
-          backgroundColor: colors.primary
-        }],
-        onPress: nextStep,
-        disabled: !password || password.length < 8 || password !== confirmPassword,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: '#FFFFFF'
-          }],
-          children: "Next"
-        })
-      })]
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleSecurityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, password, confirmPassword, showPassword, showConfirmPassword, handlePasswordChange, handleConfirmPasswordChange, prevStep, nextStep, styles]);
-  const renderSummaryStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, colors, formData, passwordVisibility, updateField, setErrorMessage, togglePasswordVisibility, prevStep, handleSecurityNext, styles]);
+  const renderSummaryStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.stepTitle, {
-        color: colors.text
-      }],
-      children: "Ready to join"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
+          color: colors.text
+        }],
+        children: "Ready to join"
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.summaryContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -573,7 +911,7 @@ const SignUpScreen = ({
           style: [styles.summaryValue, {
             color: colors.text
           }],
-          children: username
+          children: formData.username
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.summaryRow,
@@ -586,66 +924,29 @@ const SignUpScreen = ({
           style: [styles.summaryValue, {
             color: colors.text
           }],
-          children: email
+          children: formData.email
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: colors.primary
-      }],
-      onPress: handleSignUp,
-      disabled: isLoading,
-      testID: "signup-button",
-      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.buttonText,
-        children: "Create Account"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton, {
-          borderColor: colors.border
-        }],
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })
-      })
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Create Account',
+        onPress: handleSignUp,
+        icon: 'checkmark',
+        variant: 'primary',
+        disabled: isLoading,
+        loading: isLoading,
+        testID: 'signup-button'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, colors, username, email, isLoading, handleSignUp, prevStep, styles]);
-  const renderProgressIndicators = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.progressContainer,
-    children: [0, 1, 2, 3].map(step => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.progressDot, currentStep === step ? {
-        backgroundColor: colors.primary,
-        width: 24
-      } : {
-        backgroundColor: colors.border
-      }]
-    }, step))
-  }), [currentStep, colors, styles]);
-  const renderCurrentStep = (0, _react.useCallback)(() => {
-    switch (currentStep) {
-      case 0:
-        return renderWelcomeStep;
-      case 1:
-        return renderIdentityStep;
-      case 2:
-        return renderSecurityStep;
-      case 3:
-        return renderSummaryStep;
-      default:
-        return renderWelcomeStep;
-    }
-  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
+  }), [fadeAnim, slideAnim, colors, formData, isLoading, handleSignUp, prevStep, styles]);
 
-  // If user is already authenticated, show user info and account center option
+  // If user is already authenticated, show user info
   if (user && isAuthenticated) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
       style: [styles.container, {
@@ -694,6 +995,22 @@ const SignUpScreen = ({
       })]
     });
   }
+
+  // Render current step
+  const renderCurrentStep = (0, _react.useCallback)(() => {
+    switch (currentStep) {
+      case 0:
+        return renderWelcomeStep();
+      case 1:
+        return renderIdentityStep();
+      case 2:
+        return renderSecurityStep();
+      case 3:
+        return renderSummaryStep();
+      default:
+        return renderWelcomeStep();
+    }
+  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
     style: [styles.container, {
       backgroundColor: colors.background
@@ -706,232 +1023,14 @@ const SignUpScreen = ({
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
       keyboardShouldPersistTaps: "handled",
-      children: [renderProgressIndicators, renderCurrentStep()]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressIndicator, {
+        currentStep: currentStep,
+        totalSteps: 4,
+        colors: colors,
+        styles: styles
+      }), renderCurrentStep()]
     })]
   });
 };
-
-// Memoized styles creation
-const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingTop: 40,
-    paddingBottom: 40
-  },
-  stepContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 500
-  },
-  welcomeImageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 30
-  },
-  welcomeTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
-    lineHeight: 48,
-    marginBottom: 24,
-    textAlign: 'left',
-    letterSpacing: -1
-  },
-  welcomeText: {
-    fontSize: 16,
-    textAlign: 'left',
-    marginBottom: 30,
-    lineHeight: 24
-  },
-  stepTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 34,
-    marginBottom: 20,
-    color: colors.primary,
-    maxWidth: '90%',
-    textAlign: 'left'
-  },
-  inputContainer: {
-    marginBottom: 18,
-    width: '100%'
-  },
-  label: {
-    fontSize: 15,
-    marginBottom: 8,
-    fontWeight: '500',
-    letterSpacing: 0.1
-  },
-  input: {
-    height: 48,
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    borderWidth: 1,
-    fontSize: 16,
-    marginBottom: 2
-  },
-  validationIndicator: {
-    position: 'absolute',
-    right: 16,
-    top: 14
-  },
-  validationSuccessCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    gap: 8
-  },
-  validationErrorCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    gap: 8
-  },
-  validationText: {
-    fontSize: 12,
-    fontWeight: '500'
-  },
-  passwordToggle: {
-    position: 'absolute',
-    right: 16,
-    top: 14,
-    padding: 4
-  },
-  passwordHint: {
-    fontSize: 12,
-    marginTop: 4
-  },
-  button: {
-    height: 48,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 24,
-    shadowColor: colors.primary,
-    shadowOpacity: 0.12,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowRadius: 8,
-    elevation: 2,
-    width: '100%'
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontSize: 17,
-    fontWeight: '700',
-    letterSpacing: 0.2
-  },
-  footerTextContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 28
-  },
-  footerText: {
-    fontSize: 15
-  },
-  linkText: {
-    fontSize: 15,
-    fontWeight: '700'
-  },
-  userInfoContainer: {
-    padding: 20,
-    marginVertical: 20,
-    borderRadius: 24,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.04,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 4,
-    elevation: 1
-  },
-  userInfoText: {
-    fontSize: 16,
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  actionButtonsContainer: {
-    marginTop: 24
-  },
-  navigationButtons: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 28,
-    width: '100%'
-  },
-  navButton: {
-    borderRadius: 24,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 28,
-    backgroundColor: '#F3E5F5'
-  },
-  backButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1
-  },
-  nextButton: {
-    minWidth: 100
-  },
-  navButtonText: {
-    fontSize: 16,
-    fontWeight: '700'
-  },
-  progressContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginBottom: 20,
-    marginTop: 8
-  },
-  progressDot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
-    marginHorizontal: 6,
-    borderWidth: 2,
-    borderColor: '#fff',
-    shadowColor: colors.primary,
-    shadowOpacity: 0.08,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowRadius: 2,
-    elevation: 1
-  },
-  summaryContainer: {
-    padding: 0,
-    marginBottom: 24,
-    width: '100%'
-  },
-  summaryRow: {
-    flexDirection: 'row',
-    marginBottom: 10
-  },
-  summaryLabel: {
-    fontSize: 15,
-    width: 90
-  },
-  summaryValue: {
-    fontSize: 15,
-    fontWeight: '600',
-    flex: 1
-  }
-});
 var _default = exports.default = SignUpScreen;
 //# sourceMappingURL=SignUpScreen.js.map